<template>
  <el-card class="box-card">
    <!-- 卡片头部的结构 -->
    <template #header>
      <div class="detail">
        <span>挂号详情</span>
      </div>
    </template>
    <!-- 展示卡片主体内容的顶部结构 -->
    <div class="top">
      <!-- 左侧标签 -->
      <el-tag class="ml-2" type="success">
        <div class="tag">
          <svg
            t="1726738028829"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="7591"
            width="16"
            height="16"
          >
            <path
              d="M392.533333 806.4L85.333333 503.466667l59.733334-59.733334 247.466666 247.466667L866.133333 213.333333l59.733334 59.733334L392.533333 806.4z"
              fill="#1afa29"
              p-id="7592"
            ></path>
          </svg>
          <span>预约成功，待支付</span>
        </div>
      </el-tag>
      <div class="right_info">
        <img src="../../../../assets/images/code_app.png" alt="" />
        <div class="info">
          <p>微信 关注“北京114预约挂号”</p>
          <p>“快速预约挂号”</p>
        </div>
      </div>
    </div>
    <!-- 订单详情底部的结构 -->
    <div class="bottom">
      <div class="left">
        <!-- 左侧展示订单详情信息 -->
        <el-descriptions class="margin-top" :column="1" border>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">就诊人信息</div>
            </template>
            {{ orderInfo.patientName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">就诊日期</div>
            </template>
            {{ orderInfo.reserveDate }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">就诊医院</div>
            </template>
            {{ orderInfo.hosname }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">就诊科室</div>
            </template>
            {{ orderInfo.depname }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">医生职称</div>
            </template>
            {{ orderInfo.title }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">医事服务费</div>
            </template>
            <span style="color: red">{{ orderInfo.amount }}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">挂号单号</div>
            </template>
            {{ orderInfo.outTradeNo }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">挂号时间</div>
            </template>
            {{ orderInfo.createTime }}
          </el-descriptions-item>
        </el-descriptions>
        <div class="btn">
          <el-popconfirm title="确定取消预约吗？" @confirm="cancel">
            <template #reference>
              <el-button>取消预约</el-button>
            </template>
          </el-popconfirm>
          <el-button type="primary" size="default" @click="openDialog"
            >支付</el-button
          >
        </div>
      </div>
      <div class="right">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>注意事项</span>
            </div>
          </template>
          <p>
            1.请确认就诊人信息是否准确，若填写错误将无法取号就诊，损失由本人承担；
          </p>
          <p style="color: red">
            2.【取号】就诊当天需在{{ orderInfo.fetchTime }}前
            在医院取号，未取号视为爽约，该号不退不换；
          </p>
          <p>
            3.【退号】在{{ orderInfo.quitTime }}前可在线退号
            ，逾期将不可办理退号退费；
          </p>
          <p>
            4.北京114预约挂号支持自费患者使用身份证预约，同时支持北京市医保患者使用北京社保卡在平台预约挂号。请于就诊当日，携带预约挂号所使用的有效身份证件到院取号；
          </p>
          <p>5.请注意北京市医保患者在住院期间不能使用社保卡在门诊取号。</p>
        </el-card>
      </div>
    </div>
    <!-- 展示支付二维码的结构 -->
    <!-- 对话框是通过v-model控制显示和隐藏的：true：显示，false：隐藏 -->
    <el-dialog
      v-model="dialogVisible"
      title="微信支付"
      width="400"
      @close="closeDialog"
    >
      <!-- 支付需要使用的二维码图片 -->
      <div class="qrcode">
        <img :src="imgUrl" alt="" />
        <p>请使用微信扫一扫</p>
        <p>扫描二维码支付</p>
      </div>
      <!-- 对话框底部插槽传递结构 -->
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="closeDialog"> 关闭窗口 </el-button>
        </div>
      </template>
    </el-dialog>
  </el-card>
</template>
  
<script setup lang="ts">
import { useRoute } from "vue-router";
import { onMounted, ref } from "vue";
import {
  reqOrderInfo,
  reqOrderCancel,
  reqQrcode,
  reqPayResult,
} from "@/api/user";
import type { OrderResponseData, PayResult, QrCode } from "@/api/user/type";
//@ts-ignore
import { ElMessage } from "element-plus";
//生成二维码插件qrcode
//@ts-ignore
import QRCode from "qrcode";
let $route = useRoute();
//定义存储二维码图片路径
let imgUrl = ref<string>("");
//控制对话框的显示和隐藏
let dialogVisible = ref<boolean>(false);
let orderInfo = ref<any>({});
//存储定时器引用
let timer = ref<any>();
//组件挂载完毕
onMounted(() => {
  getOrderInfo();
});
//获取订单详情的数据
const getOrderInfo = async () => {
  let result: OrderResponseData = await reqOrderInfo(
    $route.query.orderId as string
  );
  if (result.code == 200) {
    orderInfo.value = result.data;
  }
};

//取消订单 订单状态：orderStatus -1=取消预约；0=预约成功，待支付；1-预约成功，已支付
const cancel = async () => {
  try {
    //取消预约成功
    await reqOrderCancel($route.query.orderId as string);
    //再次获取订单详情的数据
    getOrderInfo();
  } catch (error) {
    ElMessage.error({
      type: "error",
      message: "取消预约失败",
    });
  }
};

//点击支付按钮的回调
const openDialog = async () => {
  //展示对话框
  dialogVisible.value = true;
  //获取支付使用的二维码信息
  let result: QrCode = await reqQrcode($route.query.orderId as string);
  //根据服务器返回的二维码信息生成二维码图片
  imgUrl.value = await QRCode.toDataURL(
    result.data.codeUrl == null ? "你好！测试二维码生成" : result.data.codeUrl
  );
  //询问服务器当前这笔订单支付的状态
  //只要二维码出来，就要轮询询问服务器是否支付成功
  timer.value = setInterval(async () => {
    let result: PayResult = await reqPayResult($route.query.orderId as string);
    //如果服务器返回的数据data：true，代表支付成功，关闭对话框
    if (result.data) {
      dialogVisible.value = false;
      //提示信息
      ElMessage.success({
        type: "success",
        message: "支付成功",
      });
      //关闭定时器
      clearInterval(timer.value);
      //再次获取订单详情的数据
      getOrderInfo();
    }
  }, 2000);
};
//关闭对话框的回调
const closeDialog = () => {
  //关闭对话框，让对话框隐藏
  dialogVisible.value = false;
  //关闭定时器
  clearInterval(timer.value);
};
</script>
  
<style scoped lang="scss">
.box-card {
  .detail {
    color: #7f7f7f;
    font-weight: 900;
  }
  .top {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    padding: 10px;
    .tag {
      display: flex;
      justify-content: center;
      align-items: center;
      span {
        margin-left: 5px;
      }
    }
    .right_info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      img {
        width: 40px;
        height: 40px;
      }
      .info {
        margin-left: 10px;
        p {
          font-size: 12px;
          line-height: 20px;
        }
      }
    }
  }
  .bottom {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    .left {
      flex: 4;
      .btn {
        margin: 10px 0px;
      }
    }
    .right {
      margin-left: 20px;
      flex: 6;
      p {
        line-height: 30px;
      }
    }
  }
}

::v-deep(.el-dialog__body) {
  border-top: 1px solid #7f7f7f;
  border-bottom: 1px solid #7f7f7f;
}
.qrcode {
  display: flex;
  flex-direction: column;
  align-items: center;
  p {
    line-height: 30px;
  }
}
</style>